<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 对象数组
const menuItems = [
  { id: 'orders', title: '订单管理', icon: 'Document', path: '/admin/orders', name: 'AdminOrders' },
  { id: 'products', title: '商品管理', icon: 'Box', path: '/admin/products', name: 'AdminProducts' },
  { id: 'stores', title: '商家管理', icon: 'Shop', path: '/admin/stores', name: 'AdminStores' },
  { id: 'users', title: '用户管理', icon: 'User', path: '/admin/users', name: 'AdminUsers' }
]

const activeMenu = computed(() => {
  const path = route.path
  const currentMenu = menuItems.find(item => path.includes(item.id))
  return currentMenu ? currentMenu.id : 'orders'
})

const handleMenuClick = (menuId: string) => {
  const menuItem = menuItems.find(item => item.id === menuId)
  if (menuItem) {
    // 使用命名子路由，确保渲染在 AdminPanel 嵌套路由中
    router.push({ name: menuItem.name })
  }
}
</script>

<template>
  <div class="admin-sidebar">
    <!-- LOGO区域 -->
    <div class="logo-container">
      <div class="logo">Admin</div>
    </div>
    
    <div class="sidebar-menu">
      <div
        v-for="(item) in menuItems"
        :key="item.id"
        class="menu-item"
        :class="{ active: activeMenu === item.id }"
        @click="handleMenuClick(item.id)"
      >
        <div class="icon-container">
          <el-icon><component :is="item.icon" /></el-icon>
        </div>
        <div class="menu-label">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.admin-sidebar {
  margin-top: 0.8rem;
  width: 7.5rem;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: calc(100vh - 2rem);
  // z-index: 100;
  top: 1.5rem;
  left: 2rem;
}

/* LOGO样式 */
.logo-container {
  display: flex;
 
  // border-bottom: 1px solid #e5e7eb;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3498db;
  display: flex;
  // align-items: center;
}

.logo::before {
  content: 'A';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 2rem;
  margin-right: 0.5rem;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  flex: 1;
  // overflow-y: auto;
  
  .menu-item {
    width: 100%;
    height: 3rem; /* 56px */
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    // padding: 0 1.5rem;
    box-sizing: border-box;
    
    &:hover {
      background-color: #f5f7fa;
      border-radius:0 0.5rem 0.5rem 0;
    }
    

    &.active {
      background-color: #e8f4fd;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: #3498db;
      }
    }

    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem; /* 28px */
      height: 1.75rem; /* 28px */
      margin-right: 0.75rem;
      color: #3498db;
    }

    .el-icon {
      font-size: 1.25rem; /* 20px */
    }
    
    .menu-label {
      color: #333333;
      font-size: 0.9rem; /* 16px */
      font-weight: 500;
    }
  }
}

/* 滚动条样式优化 */
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>